<template>
  <div>
    <section class="section_wrap wrap_te">
      <el-row :gutter="20">
        <el-col :span="8">
          <div class="grid-content">
            <div class="user-info">
              <span>{{ info.basicBorrowerName }}</span>
              <div class="btns">
                <div class="item" @click="viewOrder">查看订单</div>
                <div class="item item1" v-if="controlExceptionFlag" @click="markException">客户异常标记</div>
                <div class="item item2" @click="customerTransfer" v-if="showCustomerTransfer">客户转移</div>
              </div>
            </div>
            <div class="info-card">
              <span>身份证号码:{{ info.basicBorrowerCard }}</span>
              <span>性别：{{ sex }}</span>
            </div>
            <!--            联系方式-->
            <div class="contact-info">
              <div class="title">联系方式</div>
              <el-form ref="form" label-width="100px">
                <el-form-item label="抵押物地址:">
                  <el-input v-model="info.pledgeHouseAddress" readonly></el-input>
                </el-form-item>
                <el-form-item label="居住地址:">
                  <el-input v-model="info.basicBorrowerAddress" readonly></el-input>
                </el-form-item>
                <el-form-item label="联系电话:">
                  <el-input v-model="info.basicBorrowerPhone" readonly></el-input>
                </el-form-item>
              </el-form>
            </div>
            <!--            其他联系人-->
            <div class="other-contacts">
              <div class="title">其他联系人</div>
              <el-table
                :data="contactPersonTable"
                stripe
                size="mini"
                :show-header="false"
                header-row-class-name="headRowClass"
                style="width: 100%">
                <el-table-column
                  prop="familyMemberName"
                  label="名字"
                >
                </el-table-column>
                <el-table-column
                  prop="familyMemberRelation"
                  label="关系"
                >
                </el-table-column>
                <el-table-column
                  prop="familyMemberPhone"
                  label="电话">
                </el-table-column>
              </el-table>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content">
            <!--            保理逾期信息 -->
            <div>
              <div class="title">保理逾期信息</div>
              <div class="kk-info">
                <span class="qishu">扣款失败总期数：{{ info.failedPeriod }}期</span>
                <span>保理扣款失败总金额：<span class="jine">{{ info.failedAmount }}元</span></span>
              </div>
              <el-table
                :data="overdueFactoringTable"
                stripe
                size="mini"
                header-row-class-name="headRowClass"
                style="width: 100%">
                <el-table-column
                  prop="answerDate"
                  label="扣款日期"
                >
                </el-table-column>
                <el-table-column
                  prop="answerAmount"
                  label="扣款金额"
                >
                </el-table-column>
                <el-table-column
                  prop="failureReason"
                  label="扣款失败原因">
                </el-table-column>
              </el-table>
              <!--    分页-->
              <div class="pagination">
                <el-pagination
                  background
                  small
                  layout="prev, pager, next"
                  :total="blTotal"
                  :page-size="pageSize"
                  @current-change="blCurrentChange"
                ></el-pagination>
              </div>

            </div>
            <!--            扣款账户信息 -->
            <div>
              <div class="title">扣款账户信息</div>
              <el-table
                :data="accountDeductionTable"
                stripe
                size="mini"
                header-row-class-name="headRowClass"
                style="width: 100%">
                <el-table-column
                  prop="bankType"
                  label="扣款银行"
                >
                </el-table-column>
                <el-table-column
                  prop="basicBorrowerName"
                  label="用户姓名"
                >
                </el-table-column>
                <el-table-column
                  prop="bankNum"
                  label="扣款账户">
                </el-table-column>
              </el-table>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content ">
            <!--            贷款信息-->
            <div class="dk-info">
              <div class="title">贷款信息</div>
              <el-form ref="form" label-width="100px" class="dk-info-form">
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="贷款产品：">
                      <el-input v-model="info.productType" readonly></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12" class="row-input">
                    <el-form-item label="贷款期限：">
                      <el-input v-model="info.contractGuaranteeMonth" readonly></el-input>
                    </el-form-item>
                    <span class="unit">期 </span>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="12" class="row-input">
                    <el-form-item label="贷款金额：">
                      <el-input v-model="info.contractGuaranteeMoney" readonly></el-input>
                    </el-form-item>
                    <span class="unit">万元</span>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="还款方式：">
                      <el-input v-model="info.contractRepaymentModel" readonly></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="放款时间：">
                      <el-input v-model="info.loanTime" readonly></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12" class="row-input">
                    <el-form-item label="银行月还款：">
                      <el-input v-model="info.monthMoney" readonly></el-input>
                    </el-form-item>
                    <span class="unit">元 </span>
                  </el-col>
                </el-row>

              </el-form>
            </div>
            <!--            业务经纪信息-->
            <div>
              <div class="title">业务经纪信息</div>
              <el-form ref="form" label-width="100px">
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="归属人员：">
                      <el-input v-model="info.belong" readonly></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="联系方式：">
                      <el-input v-model="info.phone" readonly></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>
            <!--            逾期处理意见-->
            <div>
              <div class="title yj-title">
                <span>客户逾期处置意见</span>
                <div class="dh-followUp-btns">
                  <div class="dh-followUp-btn" @click="submitIdea">提交</div>
                </div>
              </div>
              <div class="yj-con">
                <div class="yijian-box">
                  <span class="yijian">处置意见：</span>
                  <el-input v-model="info.opinion" placeholder="请输入" class="yj-input" />
                </div>
                <div class="dz-time" v-if="info.opinionTime">制定日期：{{ info.opinionTime }}</div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </section>

    <section class="section_wrap ">
      <el-row :gutter="20">
        <el-col :span="16">
          <div class="grid-content  follow-up-box">
            <div>
              <div class="title dh-followUp">
                <span>贷后跟进</span>
                <div class="dh-followUp-btns">
                  <div class="dh-followUp-btn" @click="postLoanFollowUp">提交</div>
                  <div class="dh-followUp-btn clear-btn" @click="clear">清空</div>
                </div>
              </div>
            </div>
            <el-row class="dhgj-tab-row">
              <el-col :span="3">跟进方式</el-col>
              <el-col :span="4">日期</el-col>
              <el-col :span="3">联系人</el-col>
              <el-col :span="3">电话结果</el-col>
              <el-col :span="3">跟进结果</el-col>
              <el-col :span="3">跟进人</el-col>
              <el-col :span="5">详情</el-col>
            </el-row>
            <el-form ref="form" :model="followUpForm">
              <el-row class="dhgj-tab-row-item">
                <el-col :span="3">
                  <el-form-item prop="followUpMethod">
                    <el-select v-model="followUpForm.followUpMethod" placeholder="请选择">
                      <el-option
                        v-for="item in followUpMethodType"
                        :key="item.id"
                        :label="item.itemText"
                        :value="item.itemValue">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item>
                    {{ followUpForm.createTime }}
                  </el-form-item>
                </el-col>
                <el-col :span="3">
                  <el-form-item prop="contact">
                    <el-input v-model="followUpForm.contact" placeholder="请输入"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="3">
                  <el-form-item prop="callResult">
                    <el-select v-model="followUpForm.callResult" placeholder="请选择">
                      <el-option
                        v-for="item in callResultType"
                        :key="item.id"
                        :label="item.itemText"
                        :value="item.itemValue">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="3">
                  <el-form-item prop="followResult">
                    <el-select v-model="followUpForm.followResult" placeholder="请选择">
                      <el-option
                        v-for="item in followUpResultsType"
                        :key="item.id"
                        :label="item.itemText"
                        :value="item.itemValue">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="3">
                  <el-form-item prop="collectors">
                    <el-input v-model="followUpForm.collectors" placeholder="请输入"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="5" class="detaile-input">
                  <el-form-item prop="details">
                    <el-input v-model="followUpForm.details" placeholder="请输入内容"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
          <div class="grid-content  follow-up-history">
            <div class="title dh-followUp">
              <span>跟进历史</span>
              <el-form ref="followForm" :model="followUpHistoryForm" label-width="90px" class="follow-up-row">
                <el-row class="dh-followUp">
                  <el-col :span="5"></el-col>
                  <el-col :span="5">
                    <el-form-item label="跟进人：" prop="collectors">
                      <el-input placeholder="请输入" v-model="followUpHistoryForm.collectors"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="5">
                    <el-form-item label="联系人：" prop="contact">
                      <el-input placeholder="请输入" v-model="followUpHistoryForm.contact"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="5">
                    <el-form-item label="跟进结果：" prop="followResult">
                      <el-select v-model="followUpHistoryForm.followResult" placeholder="请选择">
                        <el-option
                          v-for="item in followUpResultsType"
                          :key="item.id"
                          :label="item.itemText"
                          :value="item.itemValue">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="2">
                    <div class="dh-followUp-btn" @click="inquire">查询</div>
                  </el-col>
                  <el-col :span="2">
                    <div class="dh-followUp-btn clear-btn" @click="recover">恢复</div>
                  </el-col>
                </el-row>
              </el-form>
            </div>
            <el-table
              :data="followUpHistoryTable"
              stripe
              size="mini"
              header-row-class-name="headRowClass"
              style="width: 100%">
              <el-table-column
                prop="followUpMethodName"
                label="跟进方式">
              </el-table-column>
              <el-table-column
                prop="createTime"
                label="日期">
              </el-table-column>
              <el-table-column
                prop="contact"
                label="联系人">
              </el-table-column>
              <el-table-column
                prop="callResultName"
                label="电话结果">
              </el-table-column>
              <el-table-column
                prop="followResultName"
                label="跟进结果">
              </el-table-column>
              <el-table-column
                prop="collectors"
                label="跟进人">
              </el-table-column>
              <el-table-column
                prop="details"
                label="详情">
              </el-table-column>
            </el-table>
            <!--    分页-->
            <div class="pagination">
              <el-pagination
                background
                small
                layout="prev, pager, next"
                :total="gjTotal"
                :page-size="followUpHistoryForm.pageSize"
                @current-change="gjCurrentChange"
              ></el-pagination>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content">
            <div>
              <div class="title dh-followUp">
                <span>代偿还款信息</span>
                <div class="dh-followUp-btns">
                  <div class="dh-followUp-btn dc-btn" @click="isSettleExpense=true">结清费用明细</div>
                </div>
              </div>
              <div class="dc-info">
                <span>已代偿未结清总金额：<span class="Highlight-text">{{ info.noRepayMoney }}元</span></span>
                <span>总代偿次数：<span class="Highlight-text">{{ info.repayNum }}次</span></span>
              </div>
              <el-table
                :data="compensatoryTable"
                stripe
                size="mini"
                header-row-class-name="headRowClass"
                style="width: 100%">
                <el-table-column
                  prop="repayTime"
                  label="代偿时间"
                >
                </el-table-column>
                <el-table-column
                  prop="repayMoney"
                  label="代偿金额"
                >
                </el-table-column>
                <el-table-column
                  prop="handleRepayTime"
                  label="处理时间">
                </el-table-column>
              </el-table>
              <!--    分页-->
              <div class="pagination">
                <el-pagination
                  background
                  small
                  layout="prev, pager, next"
                  :total="dcTotal"
                  :page-size.sync="dcPageSize"
                  @current-change="dcCurrentChange"
                ></el-pagination>
              </div>
            </div>
            <div>
              <div class="title">
                <span>代偿还款明细</span>
                <div class="dh-followUp-btn" @click="isDistribution=true">分配</div>
              </div>
              <el-table
                :data="dcmxListTable"
                size="mini"
                header-row-class-name="headRowClass"
                style="width: 100%"
                :row-class-name="tableRowClassName"
              >
                <el-table-column
                  prop="ordinal"
                  label="序号"
                />
                <el-table-column
                  prop="items"
                  label="项目"
                  width="200"
                >
                </el-table-column>
                <el-table-column
                  prop="transferAmount"
                  label="转账金额"
                >
                </el-table-column>
                <el-table-column
                  prop="createTime"
                  label="日期">
                </el-table-column>
              </el-table>
              <!--    分页-->
              <div class="pagination">
                <el-pagination
                  background
                  small
                  layout="prev, pager, next"
                  :total="dcmxTotal"
                  :page-size.sync="dcmxPageSize"
                  :current-page.sync="dcmxPageNum"
                  @current-change="dcmxCurrentChange"
                ></el-pagination>
              </div>
            </div>

          </div>
        </el-col>
      </el-row>
    </section>

    <!-- 转移! -->
    <el-dialog
      :modal-append-to-body="false"
      :visible.sync="isTransfer"
      title="转移订单"
      width="30%"
      :before-close="handleClose"
    >
      <Transfer ref="Transfer" :order-numbers="orderNumber" :type="true" @dialogCloes="dialogCloes" />
    </el-dialog>
    <!--    异常标记-->
    <el-dialog
      :modal-append-to-body="false"
      :visible.sync="isExceptionFlag"
      title="异常标记"
      width="30%"
      :before-close="ycHandleClose"
    >
      <ExceptionFlag ref="ExceptionFlag" :order-number="orderNumber" @dialogCloes="dialogCloes" />
    </el-dialog>
    <!--    结清费用明细-->
    <el-dialog
      :modal-append-to-body="false"
      :visible.sync="isSettleExpense"
      title="费用明细"
      width="60%"
      :before-close="fymxHandleClose"
      v-if="isSettleExpense"
    >
      <SettleExpenseDetails ref="jqmx" :order-number="orderNumber"></SettleExpenseDetails>
    </el-dialog>
    <!--    分配-->
    <el-dialog
      :modal-append-to-body="false"
      :visible.sync="isDistribution"
      title="转账金额分配明细"
      width="40%"
      v-if="isDistribution"
      :show-close="false"
    >
      <Distribution @cancel="fpHandleClose" @Refresh="Refresh" :orderNumber="orderNumber"></Distribution>
    </el-dialog>
  </div>
</template>

<script>
import {
  getCompensatoryInfo,
  getOverdue,
  getRepayInfoPage,
  getPermType,
  loanFollowSave,
  getLoanFollowPage,
  saveOpinion,
  getRepayDetailPage,
  getTbleadgUrl
} from "../../assets/js/api";
import Transfer from "../../components/postLoanManagement/transfer";
import ExceptionFlag from "../../components/postLoanManagement/exceptionFlag";
import SettleExpenseDetails from "../../components/postLoanManagement/settleExpenseDetails";
import Distribution from "../../components/postLoanManagement/distribution";
import { checkPermiss, getNowTimeFull } from "../../assets/js/utlis";

export default {
  name: "postCreditDetails",
  components: {
    Transfer,
    ExceptionFlag,
    SettleExpenseDetails,
    Distribution
  },
  data() {
    return {
      blTotal: 0,
      dcTotal: 0,
      gjTotal: 0,
      contactPersonTable: [],//联系人table
      overdueFactoringTable: [],//保理逾期信息table
      blPageNum: 1,
      pageSize: 4,
      accountDeductionTable: [],//扣款账户信息 table
      dcPageNum: 1,
      dcPageSize: 2,
      compensatoryTable: [],//代偿table
      orderNumber: "",
      info: {},
      sex: "",
      followUpMethodType: [],//跟进方式
      followUpForm: {
        orderNumber: "",
        followUpMethod: "",
        createTime: "",
        contact: "",
        callResult: "",
        followResult: "",
        collectors: "",
        details: ""
      },
      callResultType: [],//电话结果
      followUpResultsType: [],//跟进结果
      followUpHistoryForm: {
        orderNumber: "",
        pageNum: 1,
        pageSize: 4,
        collectors: "",
        contact: "",
        followResult: ""
      },
      followUpHistoryTable: [],//跟进历史table
      isTransfer: false,
      isExceptionFlag: false,
      golbalPermissions: [],
      dcmxListTable: [],
      dcmxTotal: 0,
      dcmxPageSize: 2,
      dcmxPageNum: 1,
      isSettleExpense: false,
      isDistribution: false
    };
  },
  mounted() {
    this.golbalPermissions = localStorage.getItem("permissions").split(",");
    this.orderNumber = this.$route.query.orderNumber;
    this.followUpForm.orderNumber = this.orderNumber;
    this.followUpHistoryForm.orderNumber = this.orderNumber;
    this.getInfo();
    this.getOverdueFactoring();
    this.getRepayList();
    this.getFollowUpMethod();
    this.followUpForm.createTime = getNowTimeFull();
    this.getCallResult();
    this.getFollowUpResults();
    this.getFollowUpHistoryList();
    this.getDCDetail();
    // console.log('555')
    // getTbleadgUrl({orderNumber:'RYD1691734312816345088'}).then((res) => {
    //   console.log('6666:',res)
    // });
  },
  computed: {
    //控制客户转移
    showCustomerTransfer() {
      return checkPermiss("/business:compensatory:change", this.golbalPermissions);
    },
    //控制异常订单显示
    controlExceptionFlag() {
      return checkPermiss("business:compensatory:mark", this.golbalPermissions);
    }
  },
  methods: {
    //代偿明细刷新
    Refresh() {
      this.dcmxPageNum = 1;
      this.getDCDetail();
    },
    //关闭分配弹窗
    fpHandleClose() {
      this.isDistribution = false;
    },
    //设置代偿还款明细状态
    tableRowClassName({ row, rowIndex }) {
      if (!row.allocateStatus) {
        return "dcmx-highlight";
      }
      return "";
    },
    //关闭结清费用明细
    fymxHandleClose() {
      this.$refs.jqmx.pageNum = 1;
      this.isSettleExpense = false;
    },
    //代偿明细
    getDCDetail() {
      getRepayDetailPage({
        orderNumber: this.orderNumber,
        pageNum: this.dcmxPageNum,
        pageSize: this.dcmxPageSize
      }).then(res => {
        this.dcmxListTable = res.data.records;
        this.dcmxTotal = res.data.total;
      });
    },
    //代偿明细分页
    dcmxCurrentChange(cpage) {
      this.dcmxPageNum = cpage;
      this.getDCDetail();

    },
    //清空历史跟进表单
    recover() {
      this.$refs["followForm"].resetFields();
      this.followUpHistoryForm.pageNum = 1;
      this.getFollowUpHistoryList();
    },
    //提交意见
    submitIdea() {
      if (!this.info.opinion) this.$message.error("请填写处置意见");
      return;
      saveOpinion({
        "opinion": this.info.opinion,
        "orderNumber": this.orderNumber
      }).then(() => {
        this.$message.success("提交成功");
        this.getInfo();
      });
    },
    //去详情
    viewOrder() {
      let product = this.info.productId;
      let state = this.info.orderStatus;
      sessionStorage.setItem("orderNumber", this.orderNumber);
      sessionStorage.setItem("prductId", product);
      if (product == 3 || product == 13) {
        //乐业宝 || 担保安居房
        if (state == 0) {
          //已录入
          this.$router.push("/index/HasBeenRecorded");
        } else if (state == 1) {
          //审批中
          this.$router.push("/index/Examination");
        } else if (state == 2) {
          //代交件
          this.$router.push("/index/ToSubmit");
        } else if (state == 3 || state == 7 || state == 13 || state == 14) {
          //待放款
          this.$router.push("/index/ToBeLent");
        } else if (state == 4 || state == 12) {
          //已放款已结清
          this.$router.push("/index/Released");
        } else if (state == 5 || state == 6) {
          //已回款
          this.$router.push("/Index/Terminated");
        } else if (state == 11) {
          //待跟进
          this.$router.push("/Index/ToBeLent");
        }
      } else if (product == 10) {
        //乐业分
        if (state == 0) {
          //已录入
          this.$router.push("/index/HasBeenRecordedList");
        } else if (state == 1) {
          //审批中
          this.$router.push("/index/ExaminationList");
        } else if (state == 2) {
          //代交件
          this.$router.push("/index/ToSubmitList");
        } else if (state == 3 || state == 7 || state == 13 || state == 14) {
          //待放款
          this.$router.push("/index/ToBeLentList");
        } else if (state == 4 || state == 12) {
          //已放款已结清
          this.$router.push("/index/ReleasedList");
        } else if (state == 5 || state == 6) {
          //已回款
          this.$router.push("/Index/TerminatedList");
        } else if (state == 11) {
          //待跟进
          this.$router.push("/Index/ToBeFollow");
        }
      } else if (product == 11) {
        //融银贷
        if (state == 0) {
          //已录入
          this.$router.push("/Index/MeitList/HasBeen");
        } else if (state == 1) {
          //审批中
          this.$router.push("/Index/MeitList/Exam");
        } else if (state == 2) {
          //代交件
          this.$router.push("/Index/MeitList/Tosub");
        } else if (state == 3 || state == 7 || state == 13 || state == 14) {
          //待放款
          this.$router.push("/Index/MeitList/ToBe");
        } else if (state == 4 || state == 12) {
          //已放款已结清
          this.$router.push("/Index/Meitlist/Rele");
        } else if (state == 5 || state == 6) {
          //已回款
          this.$router.push("/Index/MeitList/Term");
        } else if (state == 11) {
          //待跟进
          this.$router.push("/Index/Meitlist/Tobes");
        }
      }


      // this.$router.push("/business/allOrder/page");
    },
    ycHandleClose(done) {
      this.$refs.ExceptionFlag.closeFun(true);
      this.dialogCloes();
      done();

    },
    handleClose(done) {
      this.$refs.Transfer.closeFun(true);
      this.dialogCloes();
      done();
    },
    dialogCloes() {
      this.isTransfer = false;
      this.isExceptionFlag = false;
    },
    //客户转移
    customerTransfer() {
      this.isTransfer = true;
    },
    //标记异常
    markException() {
      this.isExceptionFlag = true;
    },
    //跟进历史分页
    gjCurrentChange(cpage) {
      this.followUpHistoryForm.pageNum = cpage;
      this.getFollowUpHistoryList();
    },
    //查询
    inquire() {
      this.followUpHistoryForm.pageNum = 1;
      this.getFollowUpHistoryList();
    },

    //跟进历史列表
    getFollowUpHistoryList() {
      getLoanFollowPage(this.followUpHistoryForm).then(res => {
        this.followUpHistoryTable = res.data.records;
        this.gjTotal = res.data.total;
      });
    },

    //清空
    clear() {
      this.$refs["form"].resetFields();
    },

    //贷后跟进
    postLoanFollowUp() {
      let form = { ...this.followUpForm };
      delete form.createTime;
      loanFollowSave(form).then(() => {
        this.$message.success("提交成功");
        this.clear();
        this.blPageNum = 1;
        this.getFollowUpHistoryList();
      });
    },
    //获取跟进结果
    getFollowUpResults() {
      getPermType("collection_status").then(res => {
        this.followUpResultsType = res.data;
      });
    },
    //获取电话结果
    getCallResult() {
      getPermType("call_result").then(res => {
        this.callResultType = res.data;
      });
    },
    //获取跟进方式
    getFollowUpMethod() {
      getPermType("follow_up_method").then(res => {
        this.followUpMethodType = res.data;
      });
    },
//代偿分页
    dcCurrentChange(cpage) {
      this.dcPageNum = cpage;
      this.getRepayList();
    },
//代偿列表
    getRepayList() {
      getRepayInfoPage({
        orderNumber: this.orderNumber,
        pageNum: this.dcPageNum,
        pageSize: this.dcPageSize
      }).then(res => {
        this.compensatoryTable = res.data.records;
        this.dcTotal = res.data.total;

      });
    }
    ,
//保理分页
    blCurrentChange(cpage) {
      this.blPageNum = cpage;
      this.getOverdueFactoring();
    }
    ,
//保理逾期列表
    getOverdueFactoring() {
      getOverdue({
        orderNumber: this.orderNumber,
        pageNum: this.blPageNum,
        pageSize: this.pageSize
      }).then(res => {
        this.overdueFactoringTable = res.data.records;
        this.blTotal = res.data.total;
      });
    }
    ,
    /**
     * 按身份证号码获取性别
     * @idNumber 身份证号码
     * @return 男：male；女：female；异常（身份证号码为空或长度、格式错误）：undefined
     */
    getGenderByIdNumber(idNumber) {
      if (idNumber) {
        let genderCode; // 性别代码
        if (idNumber.length == 18) { // 二代身份证号码长度为18位（第17位为性别代码）
          genderCode = idNumber.charAt(16);
        } else if (idNumber.length == 15) { // 一代身份证号码长度为15位（第15位为性别代码）
          genderCode = idNumber.charAt(14);
        }
        if (genderCode && !isNaN(genderCode)) {
          // 两代身份证号码的性别代码都为男奇女偶
          if (parseInt(genderCode) % 2 == 0) {
            this.sex = "女";
            return;
          }
          this.sex = "男";
        }

      }
    }
    ,
//获取信息
    getInfo() {
      getCompensatoryInfo({ orderNumber: this.orderNumber }).then(res => {
        this.info = res.data;
        this.getGenderByIdNumber(this.info.basicBorrowerCard);
        for (let i = 1; i <= 3; i++) {
          if (this.info[`familyMemberName${i}`]) {
            this.contactPersonTable.push({
              familyMemberName: this.info[`familyMemberName${i}`],
              familyMemberRelation: this.info[`familyMemberRelation${i}`],
              familyMemberPhone: this.info[`familyMemberPhone${i}`]

            });
          }

        }
        this.accountDeductionTable = [{
          bankNum: this.info.bankNum,
          bankType: this.info.bankType,
          basicBorrowerName: this.info.basicBorrowerName
        }];
        if (this.info.opinion) {
          let ideaInfo = this.info.opinion.split(":");
          this.info.opinionTime = ideaInfo[0];
          this.info.opinion = ideaInfo[1];
        }

      });
    }

  }
}
;
</script>

<style scoped type="less">

.grid-content {
  height: 456px;
  background: #FFFFFF;
  border-radius: 10px;
  padding: 20px;
  text-align: left;
}

.section_wrap {
  background: transparent;
  padding: 0;
}

.user-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;

}

.user-info span {
  font-size: 22px;
  font-weight: bold;
  color: #333333;
}

.btns {
  display: flex;
  align-items: center;
}

.item {
  height: 32px;
  background: #3B9DF8;
  border-radius: 4px;
  padding: 0 12px;
  line-height: 32px;
  color: #FFFFFF;
  margin-left: 10px;
  font-size: 14px;
  cursor: pointer;
}

.item1 {
  background: #FB575E;
}

.item2 {
  background: #28B779;
}

.info-card {
  margin-bottom: 20px;
}

.info-card span {
  display: inline-block;
  margin-right: 30px;
  font-size: 14px;
  color: #333333;
}

.title {
  font-size: 16px;
  font-weight: bold;
  color: #333333;
  border-bottom: 1px solid #EEEEEE;
  padding-bottom: 8px;
  margin-bottom: 20px;
}

/deep/ .el-input__inner {
  height: 32px;
}

.contact-info /deep/ .el-form-item {
  margin-bottom: 9px;
}

.kk-info {
  margin-bottom: 20px;
}

.kk-info span {
  font-size: 14px;
  color: #333333;
  display: inline-block;
}

.qishu {
  margin-right: 46px;
}

.kk-info .jine {
  font-size: 20px;
  font-weight: bold;
  color: #FB575E;
}

/deep/ .headRowClass th.is-leaf {
  background-color: #F2F2F2;
  font-weight: bold;
  color: #333333;
}

.pagination {
  margin-top: 10px;
  text-align: right;
  height: auto;
}

.dk-info /deep/ .el-form-item {
  margin-bottom: 19px;

}

.dc-info {
  margin-bottom: 20px;
}

.dc-info span {
  font-size: 14px;
  color: #333333;
  display: inline-block;
  margin-right: 30px;
}

.dc-info .Highlight-text {
  font-size: 20px;
  font-weight: bold;
  color: #FB575E;
}

.dh-followUp {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.dh-followUp-btn {
  width: 80px;
  height: 32px;
  background: #3B9DF8;
  border-radius: 4px;
  font-size: 14px;
  color: #FFFFFF;
  line-height: 32px;
  text-align: center;
  display: inline-block;
  margin-left: 10px;
  cursor: pointer;
}

.dc-btn {
  width: 100px;
}

.clear-btn {
  background: #FB575E;
}

.dhgj-tab-row {
  height: 32px;
  background: #F2F2F2;
  font-size: 14px;
  font-weight: bold;
  color: #333333;
  line-height: 32px;
  padding: 0 7px;
}

.follow-up-box {
  height: 160px;
  margin-bottom: 20px;
  box-sizing: border-box;
}

.follow-up-history {
  height: 276px;
}

.dhgj-tab-row-item /deep/ .el-input__inner {
  width: 110px;
}

/*.dhgj-tab-row-item /deep/ .el-input__icon {*/
/*  line-height: 33px;*/
/*}*/

.dhgj-tab-row-item {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #333333;
}

.dhgj-tab-row-item .detaile-input /deep/ .el-input__inner {
  width: 100%;
}

.follow-up-row {
  flex: 1;

}

.follow-up-row /deep/ .el-form-item {
  margin-bottom: 0;
  font-size: 14px;
  color: #333333;
}

.follow-up-row /deep/ .el-form-item__label {
  font-size: 14px;
  color: #333333;
  font-weight: normal;
}

/deep/ .el-dialog__header {
  font-weight: bold;
  text-align: left;
}

/deep/ .el-table .cell {
  font-size: 14px;
}

.row-input {
  position: relative;
}

.unit {

  font-size: 14px;
  position: absolute;
  right: 0;
  top: 10px;
}

.dk-info-form /deep/ .el-input__inner {
  width: 118px;
}

.yj-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: red;
}

.dz-time {
  font-size: 14px;
  color: #333333;
}

.yj-con {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.yijian-box {
  display: flex;
  align-items: center;
}

.yijian {
  display: inline-block;
  font-size: 14px;
  color: #333333;

}

.yj-input {
  flex: 1;
}

/deep/ .el-table .dcmx-highlight {
  background: #f7d9d9;
}
</style>